<template>
  <div class="page-operate">
    <div class="search">
          <el-button @click="loginlog" class="search-button">搜索</el-button>
          <el-input
            v-model="searchForm.username"
            placeholder="请输入完整用户昵称"
            clearable
          >
          </el-input>
       
          
       
          <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
            <el-button type="danger" slot="reference" :disabled="delBtlStatu" v-if="hasAuth('operate_log_delete')">批量删除
            </el-button>
          </el-popconfirm>
      </div>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        width="1840"
        @selection-change="handleSelectionChange"
        v-if="hasAuth('operate_log_look')"
      >

        <el-table-column
          type="selection" align="center" width="70">
        </el-table-column>
        <el-table-column
          prop="username" align="center" width="200"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop="system_module" align="center" width="300"
          label="系统模块">
        </el-table-column>
        <el-table-column
          prop="operation_type" align="center" width="500"
          label="操作类型">
        </el-table-column>
        <el-table-column
          prop="operation_ip" align="center" width="150"
          label="操作ip">
        </el-table-column>
        <el-table-column 
          prop="operation_time" align="center"
          label="操作日期">
        </el-table-column>

        <el-table-column
          prop="state"
          width="150"
          label="操作">

          <template slot-scope="scope">
<!--            <el-divider direction="vertical"></el-divider>-->
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
                <el-button type="text" slot="reference" v-if="hasAuth('operate_log_delete')">删除</el-button>
              </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
      <div class="pagenation" v-if="hasAuth('operate_log_look')">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="num"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>

    </div>
  <!-- </div> -->
</template>

<script>
export default {
  name: "operate_log",
  data() {
    return {
      tableData: '',
      searchForm: {},
      page: 1,
      page_size: 10,
      delBtlStatu: true,
      multipleSelection: [],
      num: 0,
    }
  },
  mounted() {
    this.loginlog()
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("勾选")
      console.log(val)
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0
    },
    loginlog() {
      this.$axios.get(this.$settings.BASE_URL + 'log_record/operatelog/', {
        params: {
          username: this.searchForm.username,
          page: this.page,
        }
      }).then((res) => {
        if (res.data.code === 100) {
          this.tableData = res.data.data.results
          console.log(this.tableData)
          this.num = res.data.data.count
          this.next = res.data.data.next
          this.previous = res.data.data.previous
        }
      })
    },
    prev() {
      this.$axios.get(this.next).then((res) => {
        if (res.data.code == 100) {
          this.tableData = res.data.data.results
          this.num = res.data.data.count
          this.next = res.data.data.next
          this.previous = res.data.data.previous
        }
      })
    },
    next() {
      console.log(this.next)
      this.$axios.get(this.next).then((res) => {
        if (res.data.code == 100) {
          this.tableData = res.data.data.results
          this.num = res.data.data.count
          this.next = res.data.data.next
          this.previous = res.data.data.previous
        }
      })
    },
    prevfun(value) {
      this.page = value
      //value拿到的当前的页码，点击上一页触发该函数
      this.loginlog()
    },
    nextfun(value) {
      this.page = value
      //value拿到页码，点击下一页触发该函数
      this.loginlog()
    },
    currentchange(value) {
      this.page = value
      //页码发生变化会触发，这个用来触发点击页码时触发的。
      this.loginlog()
    },
    delHandle(id) {

      var ids = []

      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }

      console.log(ids, '----------------------------------')

      this.$axios.delete(this.$settings.BASE_URL + "log_record/delete/delete_Operate/?id=" + ids).then(res => {
        if (res.data.code == 100) {
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.getUserList()
            }
          })
        } else {
          this.$message.error('删除失败');
        }

      })
    },


  },
}
</script>

<style lang="less">
.page-operate {
  overflow: auto; //高度超出显示滚动条
  height: @h*1000vh;

  // 检测屏幕宽度
  @media screen and (min-width: 1000px) and (max-width: 1500px) {

    // 屏幕宽度在1000 到 1500之间
    .el-button {
      height: @h*40vh;
      line-height: 1;
      padding: 5px 8px;
      font-size: 1rem;
    }



  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background: #404040;
  }
  .el-table{
    margin: @h*30vh @w*30vw @h*20vh;
    // padding-top: @h*10vh;
    background: #404040;
    width:  @w*1860vw;
    height: @h*820vh;
    th{
      color: #fff;
      background: #404040;
    }
    td{
      background: #2e2e2e;
      color: #fff;
    }
    
    
  }
  .el-pagination{
    float: right;
    margin-right: @w*30vw;

  }
  .search{
      border-bottom: 1px solid #404040;
      // float: right;
      height: @h*60vh;
      margin: @h*20vh @w*30vw;
      .title{
        float:right;
        line-height:  @h*40vh;
      }
      .change-button{
        float: left;
        margin-right:@w*20vw;
      }
      .el-input{
        float: right;
        width: @w*300vw;
        height: @h*40vh;
        margin: 0 @w*20vw;
        background: #2E2E2E;
        border-radius: 0px;
      }
      .el-input__inner{
        background: #4d4d4d;
        border: none;
      }
      .search-button{
        background: #00A0E9;
        color: #fff;
        border: none;
        float:right;
      }
    }
}
</style>
